<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 1,声明精灵图 -->
    <svg  style="display:none ;">
        <!-- 2,svg标签改成smybol就变成了精灵图的一个元件 在元件上声明id属性 -->
    <symbol id="one" class="svg" width="128" viewBox="0 0 130 130 " height="128" xmlns="http://www.w3.org/2000/svg">
        <path d="M96.258 57.462h31.421C124.794 27.323 100.426 2.956 70.287.07v31.422a32.856 32.856 0 0 1 25.971 25.97zm-38.796-25.97V.07C27.323 2.956 2.956 27.323.07 57.462h31.422a32.856 32.856 0 0 1 25.97-25.97zm12.825 64.766v31.421c30.46-2.885 54.507-27.253 57.713-57.712H96.579c-2.886 13.466-13.146 23.726-26.292 26.291zM31.492 70.287H.07c2.886 30.46 27.253 54.507 57.713 57.713V96.579c-13.466-2.886-23.726-13.146-26.291-26.292z"/>
    </symbol>
    <symbol id="two" width="128" height="128" xmlns="http://www.w3.org/2000/svg">
        <path d="M108.8 44.322H89.6v-5.36c0-9.04-3.308-24.163-25.6-24.163-23.145 0-25.6 16.881-25.6 24.162v5.361H19.2v-5.36C19.2 15.281 36.798 0 64 0c27.202 0 44.8 15.281 44.8 38.961v5.361zm-32 39.356c0-5.44-5.763-9.832-12.8-9.832-7.037 0-12.8 4.392-12.8 9.832 0 3.682 2.567 6.808 6.407 8.477v11.205c0 2.718 2.875 4.962 6.4 4.962 3.524 0 6.4-2.244 6.4-4.962V92.155c3.833-1.669 6.393-4.795 6.393-8.477zM128 64v49.201c0 8.158-8.645 14.799-19.2 14.799H19.2C8.651 128 0 121.359 0 113.201V64c0-8.153 8.645-14.799 19.2-14.799h89.6c10.555 0 19.2 6.646 19.2 14.799z"/>
    </symbol>
    <!-- 3,根据id调用精灵图中的svg -->
    
</svg>
    <!-- svg 精灵图 -->
    <svg>
        <use xlink:href="#one"></use>
    </svg>
    <svg>
        <use xlink:href="#two"></use>
    </svg>
    <!-- css:css-loader   less:less-loader -->
    <!-- 优化:
          1,怎么生成的精灵图? 手动生成     svg-sprites-loader
            默认会将文件名称作为id名称,可以webpack中进行配置
          2,use调用精灵图?不好记           封装成组件
    -->
</body>
</html>